<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-13 11:53:15
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-31 14:46:25
 * @FilePath: \ProtocolTool\src\renderer\src\views\OneClick\index.vue
-->
<script lang="ts" setup>
import { h } from 'vue'
import { message } from 'ant-design-vue'
import { DashboardOutlined, FileTextOutlined, SettingOutlined } from '@ant-design/icons-vue'
import Testing from './Testing/index.vue'
import Record from './Record/index.vue'
import Config from './components/Config.vue'
import { getOnlineDeviceAPI } from '@/api/OneClick'
import useTestStore from '@/store/modules/oneClick'

const testStore = useTestStore()

// 当前页面
const index = ref('cover')
const toggle = (target) => {
  index.value = target
}

testStore.currentStepObj.id && toggle('testing')

// 设备列表
const deviceList = ref<any>([])
// 当前设备
const currentDeviceId = ref()
// 查询在线设备
const getOnlineDevice = () => {
  getOnlineDeviceAPI().then((res) => {
    deviceList.value = res.data
    if (deviceList.value.length) {
      currentDeviceId.value = deviceList.value[0].id
    }
  })
}
getOnlineDevice()

const configRef = ref()
const handleConfig = () => {
  configRef.value.open()
}

const loading = ref(false)
// 启动一键测试
const launcher = async () => {
  // 测试参数
  const currentDevice = deviceList.value.find((item) => item.id === currentDeviceId.value)
  if (!currentDevice.clientId) {
    message.error('请选择设备')
    return
  }
  loading.value = true
  // 订阅一键测试主题
  if (currentDevice.protocolType === 'MQTT') {
    await testStore.startMQTTTest(currentDevice.clientId).finally(() => {
      loading.value = false
    })
  } else {
    await testStore.startSocketTest(currentDevice.clientId).finally(() => {
      loading.value = false
    })
  }
  toggle('testing')
}
</script>

<template>
  <div class="container">
    <Transition name="slide-up">
      <div v-if="index === 'cover'" class="cover unselectable">
        <div class="config">
          <a-button type="text" :icon="h(SettingOutlined)" @click="handleConfig">测试配置</a-button>
        </div>
        <div class="left">
          <img src="@/assets/images/oneclick-cover.png" />
        </div>
        <div class="right">
          <div class="devices">
            <a-select
              v-model:value="currentDeviceId"
              placeholder="暂无设备"
              style="padding-right: 10px"
            >
              <a-select-option v-for="item in deviceList" :key="item.id" :value="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </div>
          <div class="desc">一键全自动测试指令采集、实时采集。</div>
          <div class="opera">
            <a-button
              type="primary"
              size="large"
              :icon="h(DashboardOutlined)"
              :loading
              @click="launcher"
            >
              一键测试
            </a-button>
            <a-button
              class="ml-10"
              size="large"
              :icon="h(FileTextOutlined)"
              @click="toggle('record')"
            >
              测试记录
            </a-button>
          </div>
        </div>
      </div>
      <Testing v-else-if="index === 'testing'" @return="toggle('cover')" />
      <Record v-else @return="toggle('cover')" />
    </Transition>
    <Config ref="configRef" />
  </div>
</template>

<style lang="less" scoped>
.container {
  position: relative;
  .cover {
    position: absolute;
    top: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .config {
      position: absolute;
      top: -70px;
      right: 20px;
    }

    .left {
      width: 360px;
      margin-right: 60px;
      img {
        width: 100%;
        animation: cover-animation 6s ease-in-out infinite;
      }

      @keyframes cover-animation {
        0% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-10px) scale(1.1);
        }

        100% {
          transform: translateY(0);
        }
      }
    }
    .right {
      width: 360px;

      .devices {
        margin-bottom: 20px;

        :deep(.ant-select-selector) {
          border: none;
          outline: none;

          .ant-select-selection-item {
            font-size: 18px;
            font-weight: bold;
          }
          .ant-select-selection-placeholder {
            font-size: 18px;
            font-weight: bold;
          }
        }
        :deep(.ant-select-focused .ant-select-selector) {
          box-shadow: none;
        }
      }
      .desc {
        font-size: 14px;
        color: #666;
      }
      .opera {
        margin-top: 20px;
      }
    }
  }
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.25s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
.ant-btn-primary {
  background-color: rgb(0, 185, 107);
}
.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #139937;
}
.ant-btn-default:not(:disabled):hover {
  color: #1a8c35;
  border-color: #139937;
}
</style>
